<template>
  <view class="review-container">
    <!-- 评分系统 -->
    <view class="rating-section">
      <text>评分：</text>
      <view class="stars">
        <text 
          v-for="(star, index) in 5" 
          :key="index" 
          :class="['star', { active: rating >= index + 1 }]"
          @click="setRating(index + 1)"
        >
          ★
        </text>
      </view>
    </view>

    <!-- 图片上传 -->
    <view class="image-upload-section">
      <text>上传图片（最多3张）：</text>
      <view class="image-list">
        <view 
          v-for="(image, index) in images" 
          :key="index" 
          class="image-item"
        >
          <image :src="image" mode="aspectFill"></image>
          <text class="delete-icon" @click="deleteImage(index)">×</text>
        </view>
        <view 
          v-if="images.length < 3" 
          class="add-image" 
          @click="uploadImage"
        >
          +
        </view>
      </view>
    </view>

    <!-- 文字评价 -->
    <view class="comment-section">
      <text>评价内容（200字以内）：</text>
      <textarea 
        v-model="comment" 
        placeholder="请输入您的评价..."
        maxlength="200"
      ></textarea>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-button" @click="submitReview">提交评价</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rating: 0, // 当前评分
      images: [], // 已上传图片列表
      comment: '', // 文字评价
      order: null // 当前订单信息
    };
  },
  onLoad(options) {
    if (options.orderId) {
      this.order = JSON.parse(decodeURIComponent(options.orderId));
    }
  },
  methods: {
    // 设置评分
    setRating(value) {
      this.rating = value;
    },
    // 上传图片
    uploadImage() {
      uni.chooseImage({
        count: 3 - this.images.length,
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths];
        }
      });
    },
    // 删除图片
    deleteImage(index) {
      this.images.splice(index, 1);
    },
    // 提交评价
    submitReview() {
      if (this.rating === 0) {
        uni.showToast({
          title: '请为订单评分',
          icon: 'none'
        });
        return;
      }

      if (this.comment.trim() === '') {
        uni.showToast({
          title: '请输入评价内容',
          icon: 'none'
        });
        return;
      }

      const reviewData = {
        orderId: this.order.orderId,
        rating: this.rating,
        images: this.images,
        comment: this.comment
      };

      // 模拟保存评价
      uni.showToast({
        title: '评价提交成功',
        icon: 'success'
      });

      // 👇 替换为：更新订单状态为已完成
      let ordersList = uni.getStorageSync('ordersList') || [];
      const targetIndex = ordersList.findIndex(order => order.orderId === this.order.orderId);

      if (targetIndex > -1) {
        ordersList[targetIndex].status = 'reviewed'; // 新增一个状态表示已评价完成
        uni.setStorageSync('ordersList', ordersList);
      }

      // 返回到 tabbar-4 页面
      uni.navigateBack();

      // 在 tabbar-5 中添加历史订单记录
      this.addReviewToHistory(reviewData);
    },
    // 添加评价到历史订单
    addReviewToHistory(reviewData) {
      const historyOrders = uni.getStorageSync('historyOrders') || [];
      historyOrders.push({
        ...this.order,
        review: reviewData
      });
      uni.setStorageSync('historyOrders', historyOrders);
    }
  }
};
</script>

<style scoped>
.review-container {
  padding: 20rpx;
}

.rating-section, .image-upload-section, .comment-section {
  margin-bottom: 30rpx;
}

.stars {
  font-size: 40rpx;
  color: #ccc;
}

.stars .active {
  color: #ffcc00;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.image-item {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  overflow: hidden;
}

.image-item image {
  width: 100%;
  height: 100%;
}

.delete-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 6rpx;
  border-radius: 50%;
}

.add-image {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;
  font-size: 60rpx;
  color: #ccc;
}

textarea {
  width: 100%;
  height: 200rpx;
  border: 1px solid #ccc;
  padding: 10rpx;
}

.submit-button {
  background-color: #007aff;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}
</style>